<template>
  <div class="default-main ba-table-box page">
    <!-- 按钮与搜索 -->
    <el-row class="page-button">
      <el-button type="primary" @click="save()">新增</el-button>
      <el-button type="success" @click="loadTableData()">刷新</el-button>
      <el-input style="width: 20%; margin: 0 0 0 auto" v-model="searchText" placeholder="搜索" :suffix-icon="Search"
        @keyup.enter="handleSearch" clearable />
    </el-row>

    <div class="demo-image__error" v-loading="tableLoading">
      <div class="block" v-for="fit in fits" :key="fit">
        <el-image :src="url" fit="contain" lazy>
          <template #error>
            <div class="image-slot">
              <el-icon>
                <icon-picture />
              </el-icon>
            </div>
          </template>
        </el-image>
        <span class="demonstration">{{ fit }}</span>
      </div>
    </div>

    <!-- 分页 -->
    <el-pagination style="margin-top: 16px" v-model:current-page="page.current" v-model:page-size="page.limit"
      :page-sizes="[5, 10, 20, 50]" :small="small" :disabled="disabled" :background="background"
      layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
      @current-change="onTableCurrentChange" />

  </div>
</template>

<script setup>
import { Picture as IconPicture, Search } from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";

const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
const url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const tableLoading = ref(false);
const searchText = ref("");
const page = reactive({
  current: 1,
  limit: 10,
  total: 0,
  list: [],
});


// 搜索
const handleSearch = (e) => {
  e.target.blur();
  loadTableData();
};

// 修改分页
const onTableCurrentChange = (val) => {
  page.current = val;
  loadTableData();
};
const handleSizeChange = (val) => {
  page.limit = val;
  page.current = 1;
  loadTableData();
}

// 查询表格数据
const loadTableData = () => {
  tableLoading.value = true;

  request({
    url: "/bank/list",
    method: "post",
    data: {
      "pageNumber": page.current,
      "pageSize": page.limit,
      "query": searchText.value,
      "order": [
        {
          "field": "status",
          "sort": "DESC"
        }
      ]
    }
  }).then((res) => {
    if (res.status === 200) {
      let data = res.data;
      page.current = data.page;
      page.total = data.total;
      page.list = data.list;
    }
  }).finally(() => {
    tableLoading.value = false;
  });

};


// 页面挂载
onMounted(() => {
  loadTableData();
});
</script>

<style scoped>
.page {
  width: calc(100% - var(--ba-main-space) - var(--ba-main-space));
  padding: 16px;
  background: #ffffff;
}

.page-button {
  padding: 16px 16px 16px 0;
}

.demo-image__error .block {
  padding: 10px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 25%;
  box-sizing: border-box;
  vertical-align: top;
}

.demo-image__error .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.demo-image__error .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}

.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
</style>
